<template>
	<view class="content">
		<nav-bar :title="$t('團隊記錄')" leftIcon="left"></nav-bar>
		<view class="content-1">
			<view class="info">
				<image class="headPic" mode="aspectFill" src="../../assets/my/youxiang.png"></image>
				<view class="name-brief">
					<view class="name">
						<text>{{getMyData.userName}}</text>
					</view>
					<view class="brief">
						{{$t('我的邀請碼')}}：{{getMyData.code}}

					</view>
				</view>
			</view>
			<view class="num-data">
				<view class="ll item">
					<view class="num">
						{{getMyData.groupNumber || 0}}
					</view>

					<view class="type">
						{{$t('邀請人數')}}
					</view>
				</view>
<!-- 				<view class="cfp item">
					<view class="num">
						{{ getMyData.userGrade || 0}}
					</view>
					<view class="type">
						{{$t('團隊收益')}}(CFP)
					</view>
				</view> -->
				<view class="rs item">
					<view class="num">
						{{getMyData.teamNumber || 0}}
					</view>
					<view class="type">
						{{$t('團隊人數')}}
					</view>

				</view>
			</view>
		</view>
		<view class="content-2">
			<view class="title">{{$t('我的團隊信息')}}</view>
			<view class="btn" @click="jumpYqhy">
				<image class="icon" src="@/assets/team/info@2x.png"></image>
				{{$t('邀請好友')}}
			</view>
		</view>
		<view class="content-3">
			<view class="cont3-item" v-if="getMyDataXx.length > 0" v-for="item in getMyDataXx" :key="item.id">
				<view class="name-icon">
					<view class="name">
						{{item.userName}}
					</view>

				</view>
				<view class="dengji" style="margin-top: 15rpx;">
					<image class="denjiIcon" src="@/assets/my/vip.png"></image>
					<text class="iconText">V{{ item.userGrade }}{{ $t('經紀人') }}</text>
				</view>
				<view class="num-data">
					<view class="ll item">
						<view class="num">
							<!-- {{item?.sy ? item.sy : '- -'}} -->
							{{item.totalAmount || 0}}
						</view>
						<view class="type">
							{{$t('收益')}}
						</view>
					</view>
					<!-- 					<view class="cfp item">
						<view class="num">
							{{item?.ll ? item.ll : '- -'}}
						</view>
						<view class="type">
							流量(GB)
						</view>
						
					</view> -->
					<view class="rs item">
						<view class="num">
							{{item.teamNumber || 0}}
						</view>
						<view class="type">
							{{$t('下屬團隊人數')}}
						</view>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref,
		reactive
	} from 'vue'
	import teamRequest from '@/hooks/team.js'
	import i18n from '@/locale/index'
	const {
		list,
		details,
		size,
		sumComputed,
		getMyTeam
	} = teamRequest()
	import {
		onReachBottom
	} from '@dcloudio/uni-app'
	const getMyData = ref({})
	const getMyDataXx = ref([])
	const page = ref({
		pageNum:1,
		pageSize:10
	})
	const getList = async () => {
		let list = {
			userId: uni.getStorageSync('setUserInfo').userId
		}
		const data = await getMyTeam('user/userTeam', list)
		getMyData.value = data
		// const dataUser = await getMyTeam('user/teamInformation', list)
		// getMyDataXx.value = dataUser
	}
	const getListData = async () => {
		let list = {
			userId: uni.getStorageSync('setUserInfo').userId,
			...page.value
		}
		const dataUser = await getMyTeam('/user/teamInformation', list)

		if (!dataUser.records.length) {
			return uni.showToast({
				title: `${i18n.global.t('没有更多了')}!`,
				icon: 'none',
			})
		}
		getMyDataXx.value = getMyDataXx.value.length ? [...getMyDataXx.value, ...dataUser.records] : [...dataUser.records]



	}
	const jumpYqhy = () => {
		uni.navigateTo({
			url: "/pages/inviteFriends/inviteFriends",
			animationType: "fade-in",
			animationDuration: 200,
		});
	}
	getList()
	getListData()
	// var data = reactive({
	// 	name: '123',
	// 	dj: 1,
	// 	text: 'dss12344',
	// 	ll: 456,
	// 	cfp: 4645,
	// 	rs: 456
	// })
	// const tdList = reactive([
	// 	{id: 0, name: '稻草人沾沾', sy: 123, ll: 456, rs: 789},
	// 	{id: 1, name: '流年', sy: 123, ll: 456, rs: 789}]
	// )
	const jump = (val) => {
		uni.navigateTo({
			url: `/pages/${val}/${val}`
		})
	}
	//上拉加载更多
	onReachBottom(() => {
		page.value.pageNum++
		getListData()
	})
</script>

<style lang="scss" scoped>
.dengji {
	display: flex;
	align-items: center;
}

.iconText {
	margin-left: 15rpx;
	font-size: 22rpx;
	color: #fff;
}

.denjiIcon {
	width: 40rpx;
	height: 40rpx;
	display: block;
}
	.content-1 {
		width: 690rpx;
		height: 330rpx;
		background-image: url('@/assets/index/banner.png');
		background-size: 100% 100%;
		background-position: center;
		box-sizing: border-box;

		.info {
			display: flex;
			margin: 60rpx 0 0 40rpx;

			.headPic {
				width: 126rpx;
				height: 126rpx;
				border: 3rpx solid #FFFFFF;
				border-radius: 50%;
			}

			.name-brief {
				margin-left: 24rpx;
				flex: 1;
				margin-top: 23rpx;

				.name {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					display: flex;
					align-items: center;

					.grade {
						width: 173rpx;
						height: 41rpx;
						position: relative;
						top: 5rpx;
						left: 11rpx;
					}
				}

				.brief {
					margin-top: 10rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 300;
					color: #FFFFFF;
				}
			}

		}

		.num-data {
			margin-top: 5rpx;
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			// justify-content: space-between;
			justify-content: space-around;
			display: flex;
			.item {
				.num {
					text-align: center;
					font-size: 36rpx;
					font-family: DIN Alternate;
					font-weight: bold;
					color: #12FFFA;
				}

				.type {
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #12FFFA;
				}
			}
		}
	}

	.content-2 {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		margin: 29rpx 0;

		.title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.btn {
			width: 185rpx;
			height: 60rpx;
			background: linear-gradient(90deg, #039BDA, #0DF2ED);
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;

			.icon {
				width: 25rpx;
				height: 25rpx;
				margin-right: 8rpx;
			}
		}
	}

	.content-3 {
		margin-top: 28rpx;
		.cont3-item {
			width: 670rpx;
			background: #24232C;
			border-radius: 15rpx;
			padding: 32rpx 81rpx 25rpx 32rpx;
			box-sizing: border-box;
			margin-bottom: 31rpx;

			.name-icon {
				display: flex;
				align-items: center;

				.name {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}

				.icon {
					margin-left: 18rpx;
					width: 173rpx;
					height: 41rpx;
				}
			}

			.num-data {
				margin-top: 20rpx;
				width: 100%;
				box-sizing: border-box;
				justify-content: space-between;
				display: flex;

				.item {
					.num {
						font-size: 28rpx;
						font-family: DIN Alternate;
						font-weight: bold;
						color: #FFFFFF;
					}

					.type {
						margin-top: 5rpx;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 300;
						color: #808492;
					}
				}
			}
		}
	}
</style>